import React,{useRef} from 'react'
import { useState } from 'react';

export default function App() {
    const containerElementRef=useRef(null);// 挂载后才有
    // dom 模板的编译->数据的浇灌->react.createElement 虚拟DOM + render
    // renderDOM
    const [message,setMessage]=useState(
        "Click Button to get container width"
    )
    const calculateContainerWith=()=>{
        setMessage(`Container width:
        ${containerElementRef.current.clientWidth}`)
    }
  return (
    <div>
      <div className="container" ref={containerElementRef}>
        <h2>{message}</h2>
        <button onClick={calculateContainerWith}>
            Calculate container width</button>
      </div>
    </div>
  )
}
